import { Select, Tooltip, Input, Button } from 'antd';
import { useEffect, useState } from 'react';
import styles from './index.less';
import falseSrc from './false.png';
import trueSrc from './true.png';
const Index = ({ value, onChange }) => {
  const [unlock, setUnlock] = useState('busywork');
  const [visible, setVisible] = useState(false);
  const [unlockbusyworkAplus, setUnlockbusyworkAplus] = useState<string>(); // 作业解锁A+及以上作业数
  const [unlockbusyworkS, setUnlockbusyworkS] = useState<string>(); //作业解锁s及以上作业数
  const [unlockprice, setUnlockprice] = useState<string>(); // 收费解锁价格
  const [val, setVal] = useState();
  const [oldVal, setOldVal] = useState();
  const onSelectChange = (type) => {
    if (type !== '1') {
      setOldVal(type);
      onChange({ type });
    } else {
      setVisible(true);
      setVal(type);
    }
  };
  const onCancel = () => {
    setVisible(false);
    setUnlockbusyworkAplus(undefined);
    setUnlockbusyworkS(undefined);
    setUnlockprice(undefined);
    setVal(oldVal);
  };
  const onOk = () => {
    onChange({
      type: val,
      unlock,
      unlockbusyworkAplus,
      unlockbusyworkS,
      unlockprice,
    });
    setVisible(false);
  };
  useEffect(() => {
    setOldVal(value?.type);
    setVal(value?.type);
    setUnlock(value?.unlock || 'busywork');
  }, [value]);
  return (
    <span>
      <Tooltip
        placement="bottom"
        trigger="click"
        visible={visible}
        onVisibleChange={(vis) => {
          if (!vis) {
            setVisible(vis);
            setVal(oldVal);
          }
        }}
        overlayClassName="c-tooltip c-input"
        overlayInnerStyle={{ width: 244, padding: '10px 6px' }}
        title={
          <div className={styles.container}>
            <div className={styles.header}>选择解锁课程方式</div>
            <div className={styles['radio-group']}>
              <div className={styles.radio} onClick={() => setUnlock('share')}>
                <span>分享课程解锁</span>
                <img loading="lazy" src={unlock === 'share' ? trueSrc : falseSrc} alt="" />
              </div>
              <div className={styles.radio2} onClick={() => setUnlock('busywork')}>
                <div className={styles.radio}>
                  <span>作业解锁</span>
                  <img loading="lazy" src={unlock === 'busywork' ? trueSrc : falseSrc} alt="" />
                </div>
                <div className={styles.radio}>
                  <span>A+ 及以上作业</span>
                  <Input
                    value={unlockbusyworkAplus}
                    onChange={(evt) => setUnlockbusyworkAplus(evt.target.value)}
                    placeholder="作业数量"
                    style={{ width: 94 }}
                    type="number"
                    className={styles.input}
                  />
                </div>
                <div className={styles.radio}>
                  <span>S 作业</span>
                  <Input
                    value={unlockbusyworkS}
                    onChange={(evt) => setUnlockbusyworkS(evt.target.value)}
                    placeholder="作业数量"
                    style={{ width: 94 }}
                    type="number"
                    className={styles.input}
                  />
                </div>
              </div>
              <div className={styles.radio} onClick={() => setUnlock('pay')}>
                <span>收费解锁</span>
                <span>
                  <Input
                    placeholder="输入"
                    style={{ width: 94 }}
                    className={styles.input}
                    type="number"
                    addonAfter="¥"
                    value={unlockprice}
                    onChange={(evt) => setUnlockprice(evt.target.value)}
                  />
                  <img loading="lazy" src={unlock === 'pay' ? trueSrc : falseSrc} alt="" />
                </span>
              </div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <Button
                style={{ width: 66, height: 24, color: '#fff' }}
                onClick={onCancel}
                type="text"
              >
                取消
              </Button>
              <Button style={{ width: 60, height: 24, padding: 0 }} onClick={onOk} type="primary">
                确定
              </Button>
            </div>
          </div>
        }
      >
        <Select size="small" style={{ width: 78 }} value={val} onChange={onSelectChange}>
          <Select.Option value={'-1'}>试听课</Select.Option>
          <Select.Option value={'0'}>正式课</Select.Option>
          <Select.Option value={'1'}>追加课</Select.Option>
        </Select>
      </Tooltip>
    </span>
  );
};
export default Index;
